<template>
    <div class="json">
        <div class="row" :class=" row.isList ? 'row-list' : ''" v-for="(row,index) in rows" :key="index">
            <el-input v-model="row.key" :disabled="pin" class="key" placeholder="属性" chk="*"></el-input>
            <el-input v-model="row.remark" placeholder="备注" class="remark"></el-input>

            <selector style="margin-left:4px;" v-model="row.type" :data="parameterTypes" fields="name,remark" class="type" chk="*"
            ></selector>

            <div v-if="!pin" class="multi">
                <el-switch v-model="row.isList"></el-switch>
                <label :style="{visibility:row.isList?'visible':'hidden'}">数组</label></div>

            <div class="rbtn" v-if="!pin">
                <el-button text
                           @click="add_click(row)"
                           :icon="Plus"
                           title="添加同级元素"></el-button>
                <el-button
                           text
                           @click="remove_click(row)"
                           :icon="Remove"></el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:54:56
 */
import '../styles/cmn.scss'

import {Setting, CirclePlus, Plus, Remove, CaretBottom, CaretTop} from '@element-plus/icons-vue'

defineOptions({
    name: "api-array",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({});


const $props = defineProps({
    pin: {type: Boolean},
    parent: {type: [Object, Array]}
});


const $model = defineModel({type: [Object, Array]});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue" ]);

const rows = $computed({
    get() {
        return $model.value;
    }, set(v) {
        $emit("update:modelValue", Object.assign(v.getJsType() == "array" ? [] : {}, v));
    }
});
const parameterTypes = $computed(function () {
    return jv.enum.ApiParameterTypeEnum.getData().filter(it => it.name != "Object" && it.name != "File");
});

const expend_click = function (e) {
//当前是展开状态
    let button = e.target;
    let sub = button.closest(".row").nextElementSibling;
    let isShow = button.classList.contains("el-icon-caret-right")
    if (isShow) {
        button.classList.remove("el-icon-caret-right");
        button.classList.add("el-icon-caret-bottom");
        sub.style.display = "block";
    }
//当前是收起状态
    else {
        button.classList.add("el-icon-caret-right");
        button.classList.remove("el-icon-caret-bottom");
        sub.style.display = "none";
    }
};
const add_click = function (row) {
    var last = row || rows.getLast();
    var def = {items: [], type: "String", stringType: "Normal"};
    if (last) {
        def.type = last.type;
    }
    rows.push(def);
};
const remove_click = function (row) {
    rows.removeItem(row);
};

onMounted(() => {

})



defineExpose({add_click})

</script>